<script>
    import Button, {Label} from "@smui/button";
    import {onMount} from "svelte";
    import Dialog from "$lib/form/CDialog.svelte";
    import CDialog from "$lib/form/CDialog.svelte";
    import {goto} from "$app/navigation";

    let expectErrorFlag;

    let finish_class = "finish"
    export let MaxSteps = 100;
    export let CurrentSteps = 1;
    export let finish_method = () => {
        console.log("完成")
        goto("/")
    }

    export let finish_text = "回到首页"
    export let ValidatesSteps = {
        1: () => {
            return true
        },
        2: () => {
            throw Error("测试用例 - 默认Step出错")
        },
        3: () => {
            return false
        }
    }

    function validate() {
        let code = CurrentSteps;
        if (ValidatesSteps[code] !== void 0)
            return ValidatesSteps[code]()
    }

    function renderStepBody() {

        for (let i of dom_.children) {
            const classNames = i.className

            if (classNames.includes("step-body-" + CurrentSteps)) {
                i.classList.add('showable')
                i.classList.remove('hidden-step')
            } else {
                i.classList.remove('showable')
                i.classList.add('hidden-step')

            }
        }
    }

    function show_info(info) {
        if (expectErrorFlag) {
            expectErrorFlag.openDialog("注意!", (info + "").replace("Error:", ""))
        }
    }

    function nextStep() {
        try {
            validate()
        } catch (e) {
            show_info(e)
            return
        }

        if (CurrentSteps < MaxSteps) {
            CurrentSteps++;
        }
        renderStepBody();
    }

    function lastStep() {
        try {
            validate()
        } catch (e) {
            show_info(e)
            return

        }

        if (CurrentSteps > 1) {
            CurrentSteps--;
        }
        renderStepBody();
    }

    function to_step(index) {
        try {
            validate()
        } catch (e) {
            show_info(e)
            return

        }
        CurrentSteps = index + 1
        renderStepBody()
    }

    function finish() {
        finish_class = ""
        CurrentSteps = "完";
        renderStepBody();
    }

    onMount(
        _ => {
            renderStepBody()
        }
    )
    let dom_;

    let fast_dom;

</script>

<div class="content">
    <div class="step-code">
        <div class="number-step step-max">
            {MaxSteps}
        </div>
        <div class="number-step current-step">
            {CurrentSteps}
        </div>
        <div class="fast-step">
            <div class="inner-fast-step" bind:this={fast_dom}>
                {#each new Array(MaxSteps) as _, index}
                    <div class="inner-fast-step-ele" on:click={_=>{
                       to_step(index)
                    }}>
                        {index + 1}
                    </div>
                {/each}
            </div>
        </div>
        <div class="tip-fast-step">
            点击进行快速跳转
        </div>
    </div>
    <div class="body">
        <div bind:this={dom_}>
            <slot>
                <div class="hidden step-body-1">
                    这是第一步
                </div>
                <div class="hidden step-body-2">
                    这是第二步
                </div>
                <div class="hidden step-body-3">
                    这是第三步
                </div>
            </slot>

            <div class="{finish_class}">
                <slot name="finish">
                    结束
                </slot>
            </div>
        </div>

    </div>

    <div class="footer">
        {#if CurrentSteps > 1 && CurrentSteps < MaxSteps}
            <Button class="step-btn-footer" on:click={lastStep}>上一步</Button>
            <Button class="step-btn-footer" variant="raised" on:click={nextStep}>下一步</Button>
        {:else if CurrentSteps === 1}
            <Button class="step-btn-footer" variant="raised" on:click={nextStep}>下一步</Button>
        {:else if CurrentSteps === MaxSteps}
            <Button class="step-btn-footer" on:click={lastStep}>上一步</Button>
            <Button class="step-btn-footer" variant="raised" on:click={finish}> 完成</Button>
        {:else}
            <Button variant="raised" on:click={finish_method}>{finish_text}</Button>
        {/if}
    </div>

    <CDialog bind:this={expectErrorFlag}></CDialog>

</div>

<style lang="less">
  .body {

    overflow: auto;
    padding-bottom: 100px;
  }

  .footer {
    position: fixed;
    bottom: 30px;
    //text-align: center;
    display: flex;
    justify-content: center;
    width: calc(100% - 240px);
    align-items: center;

    :global(.step-btn-footer) {
      margin: 0 20px;
    }
  }

  .content {
    margin: 20px 0;
    overflow: hidden;

    position: relative;
  }

  .step-code {
    position: fixed;
    z-index: 999;
    user-select: none;
    //top: 50px;
    width: fit-content;
    height: 100px;

    &:hover {
      .fast-step {
        opacity: 100;
        top: 140px;
      }

      .tip-fast-step {
        background: white;

        opacity: 100;

      }
    }

    .tip-fast-step {
      opacity: 0;
      transition: 1s;
      position: absolute;
      width: 200px;
    }

    .inner-fast-step {
      display: flex;
      height: 100px;
      background: white;


      .inner-fast-step-ele {
        font-size: 3rem;
        color: #ff3e00;
        border: 2px #fefefe solid;
        //margin: 0 1px;
        font-style: italic;
        height: 100px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: red;
          color: white;
        }
      }
    }

    .fast-step {

      transition: 1s;
      position: absolute;
      top: 0;
      left: 0px;
      opacity: 0;
    }

    .step-max {
      font-size: 5rem;
      font-weight: bold;
      padding: 0 5px;
      font-style: italic;
      box-sizing: border-box;
      background: linear-gradient(to right, red, rgba(255, 0, 0, 0.3));
      -webkit-background-clip: text;
      color: transparent;
    }

    .current-step {
      position: absolute;
      bottom: 10px;
      background: red;
      border: 2px white solid;
      color: white;
      font-weight: bolder;
      border-radius: 50%;
      //box-sizing: border-box;
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      //padding: 10px;
      right: 0;
    }
  }

  :global(.hidden-step) {
    opacity: 0 !important;
    position: relative;
    display: none !important;
    height: 0 !important;
  }

  @keyframes show_down2top {
    0% {
      opacity: 0;
      top: 40px;
    }
    100% {
      opacity: 100%;
      top: 0;
    }
  }

  .finish {
    display: none;
  }

  :global(.showable) {
    position: relative;
    animation: show_down2top .5s ease-in-out;
  }
</style>